{layout name="layout" /}

<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i>
    <a href="{:url('admin/index/index')}"> 首页</a>
    <span class="c-gray en">&gt;</span>
    <a href="{:url('topic_content/index')}">专题管理</a>
    <span class="c-gray en">&gt;</span>
    <a href="{:url('topic_content/index', ['cid'=>$category_info.id])}">{$category_info.name}</a>
    <span class="c-gray en">&gt;</span>
    <a href="javascprit:;">{$data.id ? '修改' : '新增'}</a>
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
        href="javascript:location.replace(location.href);" title="刷新">
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>

<div class="Hui-article">
    <article class="cl pd-20">
        <form action="{:url('topic_content/save',['cid'=>$cid,'id'=>$data.id])}" method="post"
            class="form form-horizontal" id="form-admin-article">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    <span class="c-red">*</span>标题:</label>
                <div class="formControls col-xs-8 col-sm-6">
                    <input type="text" class="input-text" value="{$data.title}" placeholder="请填写标题" id="title"
                        name="title">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    作者: </label>
                <div class="formControls col-xs-4 col-sm-2">
                    <input type="text" class="input-text" value="{$data.writer}" placeholder="作者" id="writer"
                        name="writer">
                </div>
                <label class="form-label col-xs-4 col-sm-2">
                    信息来源:</label>
                <div class="formControls col-xs-4 col-sm-2">
                    <input type="text" class="input-text" value="{$data.source}" placeholder="信息来源" id="source"
                        name="source">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    标题图：</label>
                <div class="formControls col-xs-6 col-sm-4">
                    <input type="text" class="input-text" value="{$data.title_pic}" name="title_pic" id="title_pic">
                    <div style="width: 160px;height: 160px;">
                        <a href="javascript:void(0);" onclick="uploadPicture()">
                            <img id="view-img"
                                src="{$data.title_pic ? $data.title_pic : '/static/admin/images/upload_picture.png'}"
                                alt="标题图" title="{$data.title_pic ? '更换' : '添加'}标题图"
                                style="max-width: 160px;max-height: 160px;">
                        </a>
                    </div>
                </div>
                <label class="form-label col-xs-2 col-sm-2">
                    <a class="btn btn-success radius" href="javascript:void(0);"
                        onclick="uploadPicture()">{$data.title_pic ? '更换' :
                        '添加'}标题图</a></label>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    关键词:</label>
                <div class="formControls col-xs-8 col-sm-6">
                    <input type="text" class="input-text" value="{$data.keywords}" placeholder="关键词" id="source"
                        name="keywords">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">内容简介:</label>
                <div class="formControls col-xs-8 col-sm-6">
                    <textarea name="summary" id="summary" cols="" rows="" class="textarea"
                        placeholder="说点什么...最多输入500个字符" datatype="*10-100" dragonfly="true"
                        onKeyUp="textarealength(this,500)">{$data.summary}</textarea>
                    <p class="textarea-numberbar">
                        <em class="textarea-length">0</em>/500
                    </p>
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    点击量：</label>
                <div class="formControls col-xs-4 col-sm-2">
                    <input type="number" class="input-text" value="{$data.clicks}" id="clicks" name="clicks"
                        style="width: 200px;">
                </div>
                <label class="form-label col-xs-4 col-sm-2">
                    排序：</label>
                <div class="formControls col-xs-4 col-sm-2">
                    <input type="number" class="input-text" value="{$data.sort}" id="sort" name="sort" max="9999"
                        style="width: 200px;">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    <span class="c-red">*</span>专题类型:</label>
                <div class="formControls col-xs-8 col-sm-6">
                    <div class="radio-box">
                        <input type="radio" id="radio-1" name="type" value="0" {if $data.type==0}checked{/if}>
                        <label for="radio-1">文件模式</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="radio-2" name="type" value="1" {if $data.type==1}checked{/if}>
                        <label for="radio-2">绑定地址</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="radio-4" name="type" value="2" {if $data.type==2}checked{/if}>
                        <label for="radio-4">内容式</label>
                    </div>
                    <!-- <div class="radio-box">
                        <input type="radio" id="radio-3" name="type" value="3" {if $data.type==3}checked{/if}>
                        <label for="radio-3">封面式</label>
                    </div> -->
                </div>
                <div class="formControls col-xs-8 col-sm-6">
                    <p class="c-primary">说明：文件模式需要上传html文件到指定的专题路径路径, 也可以上传压缩包, 然后解压至指定的专题路径;<br />
                        封面式要选择封面模板; 内容式要录入页面内容; 绑定地址要再专题路径里填入绑定的url</p>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    <span class="c-red">*</span>专题路径:</label>
                <div class="formControls col-xs-4 col-sm-4">
                    <input type="text" class="input-text" value="{$data.topic_url}" placeholder="请填写专题路径" id="topic_url"
                        name="topic_url">
                </div>
                <label class="form-label col-xs-2 col-sm-2">
                    <a class="btn btn-success radius" href="javascript:void(0);" onclick="checkUrl()">检测路径</a></label>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    压缩文件:</label>
                <label class="form-label col-xs-1 col-sm-1">
                    <a class="btn btn-success radius" href="javascript:void(0);"
                        onclick="uploadZipFile()">文件上传并解压</a></label>
                <div class="formControls col-xs-2 col-sm-2">
                    <input type="text" class="input-text" value="" placeholder="解压路径" id="topic_path"
                        name="topic_path">
                </div>
                <div class="formControls col-xs-3 col-sm-2">
                    <p class="c-red">空时默认为'/special/', 文件格式 zip. 大小不超过10M.</p>
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    页面内容:</label>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-sm-7 col-xs-offset-2 col-sm-offset-1">
                    <textarea name="topic_content" id="topic_content" cols="" rows="" class="textarea"
                        style="height: 400px;" placeholder="" dragonfly="true">{$data.topic_content}</textarea>
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <button type="submit" class="btn btn-success radius" id="admin-powers-save"
                        name="">确&nbsp;定</button>
                    <button type="button" class="btn btn-default radius" onclick="window.history.back();"
                        style="margin-left:20px;">取&nbsp;消</button>
                </div>
            </div>
        </form>
        <!-- 标题图上传 -->
        <div>
            <input type="file" hidden name="image" id="upload_picture">
        </div>
        <!-- 压缩文件上传 -->
        <div>
            <input type="file" hidden name="zipfile" id="upload_file">
        </div>
    </article>
</div>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    // 标题图上传
    const file = document.querySelector('#upload_picture');

    function uploadPicture() {
        // file模拟input点击事件
        var evt = new MouseEvent("click", {
            bubbles: false,
            cancelable: true,
            view: window,
        });
        file.dispatchEvent(evt, uploadfn());
    }

    function uploadfn() {
        file.oninput = function () {
            if (file.files && file.files[0]) {
                var formData = new FormData();
                formData.append("upload_file", file.files[0]);
                $.ajax({
                    url: '{:url("file_manager/uploadImage")}',
                    type: "post",
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    dataType: 'json',
                    success: function (res) {
                        var img = res.filename;
                        $("#view-img").attr('src', img);
                        $("#title_pic").val(img);
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        });
                        return false;
                    },
                    error: function (res) {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                });
            }
        }
    }
    // 标题图上传end

    // 压缩文件上传
    const zipfile = document.querySelector('#upload_file');

    function uploadZipFile() {
        // file模拟input点击事件
        var evt = new MouseEvent("click", {
            bubbles: false,
            cancelable: true,
            view: window,
        });
        zipfile.dispatchEvent(evt, uploadfun());
    }

    function uploadfun() {
        zipfile.oninput = function () {
            if (zipfile.files && zipfile.files[0]) {
                var formData = new FormData();
                var topic_path = $("#topic_path").val();
                formData.append("topic_path", topic_path);
                formData.append("upload_file", zipfile.files[0]);

                $.ajax({
                    url: '{:url("file_manager/uploadZipFile")}',
                    type: "post",
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    dataType: 'json',
                    success: function (res) {
                        $("#topic_url").val(res.path);
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        });
                        return false;
                    },
                    error: function (res) {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                });
            }
        }
    }
    // 标题图上传end

    //检测目录
    function checkUrl() {
        var topic_url = $("#topic_url").val();
        $.post('/admin/topic_content/checkurl', {
            'topic_url': topic_url
        }, function (data) {
            console.log(data);
            if (data.code == 1) {
                layer.msg(data.msg, {
                    icon: 1,
                    time: 1000
                });
            } else {
                layer.msg(data.msg, {
                    icon: 5,
                    time: 2000
                });
                return false;
            }
        }, 'json');
    }


    $("#form-admin-article").submit(function () {
        if (isNull($("#title").val())) {
            layer.msg('标题不可为空', {
                icon: 5,
                time: 1000
            });
            return false;
        }
    })
</script>